<template>
    <div class="docs_main">
        <div class="card">
            <template v-for="store in storeList" :key="store._id">
                <el-card :body-style="{ padding: '0px' }" shadow="hover">
                    <NuxtLink :to="`/about-${store.title}/${store._id}`">
                        <img :src="base + store.img" class="image" />
                        <div class="content">
                            <p class="title">{{ store.title }}</p>
                            <p class="detail">描述：{{ store.decs }}</p>
                            <p class="time">更新时间：{{ store.updataTime }}</p>
                            <p class="read">阅读数：{{ store.readNum }}</p>
                        </div>
                    </NuxtLink>
                </el-card>
            </template>
        </div>
        <div class="about_my">
            开发中...
        </div>

        <div class="nav" v-if="isLogin">
            <div class="nav_list" v-for="(list, index) in navList" :key="index">
                <el-tooltip class="box-item" effect="dark" :content="list.name" placement="left">
                    <nuxt-link :to="list.value">
                        <el-icon size="25">
                            <component :is="list.icon"></component>
                        </el-icon>
                    </nuxt-link>
                </el-tooltip>

            </div>
        </div>
        <el-backtop :right="100" :bottom="100" />
    </div>
</template>


<script setup lang='ts'>

import { base } from '@/service/config';


const props = defineProps({
    storeList: {
        type: Object,
        default: () => { }
    }
})
const isLogin = ref(false);

const navList = [
    { name: '日报', value: 'daily', icon: 'Message' },
    { name: 'DPP-GPT', value: 'http://106.14.121.85:5067/', icon: 'Message' },
]


onMounted(() => {
    isLogin.value = Boolean(localStorage.getItem('web-user'))
})

</script>

<style scoped lang="scss">
.docs_main {
    flex: 1;
    display: flex;
    padding: 90px 30px 30px;

    .card {
        flex: 0.8;
        display: flex;
        flex-wrap: wrap;


        .el-card {
            cursor: pointer;
            width: 300px;
            height: 400px;
            margin: 0 20px 20px 0;
            display: flex;

            :deep(.el-card__body) {
                display: flex;
                flex-direction: column;
                flex: 1;

                a {
                    flex: 1;
                }

                .content {
                    flex: 1;
                    padding: 10px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: calc(30% - 20px);
                }
            }

            img {
                width: 100%;
                height: calc(400px * 0.7);

            }

            p {
                margin: unset;
            }
        }
    }

    .about_my {
        flex: 0.2;
    }
}

.nav {
    position: fixed;
    right: 20px;
    top: 50%;
    border: 1px solid #ccc;

    .nav_list {
        height: 25px;
        width: 25px;
        padding: 5px;
        // margin-bottom: 5px;
        border-bottom: 1px #ccc dotted;

        &:last-child {
            border: unset;
            // margin: unset;
        }

        &:hover {
            background-color: #ccc;
        }
    }
}
</style>